<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>会员中心</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/vip.css" />
</head>

<body>
  <div id="app" v-cloak>
    <div class="wrap flex-wrap flex-vertical">
      <header id="header">
        <div class="header-wrap">
          <div @click="goback" class="header-left">
            <i class="iconfont icon-pre"></i>
          </div>
          <div class="header-title">会员中心</div>
        </div>
      </header>
      <div id="vip-main" class="flex-con">
        <div class="user-wrap">
          <div class="user-avatar">
            <img :src="info.avatar" alt="">
          </div>
          <div class="user-info">
            <div class="user-name">{{info.name}}</div>
            <div class="user-tips">{{info.level == '0' ? '升级VIP会员福利多多' : 'VIP还有' + info.leveltime + '天'}}</div>
          </div>
          <div class="btn-wrap">
            <button @click="go_pay" type="button">{{info.level == '0' ? '开通VIP会员' : '续费'}}</button>
          </div>
        </div>
        <div class="vip-intro">
          <div class="intro-title">会员特权</div>
          <div class="intro-list">
            <div class="intro-item" v-for="(item, index) in vip_right" :key="index">
              <div class="intro-icon">
                <img :src="item.icon" alt="">
              </div>
              <div class="intro-text">
                <div class="title">{{item.title}}</div>
                <div class="desc">{{item.desc}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
  var app;
  apiready = function () {
    $api.fixStatusBar($api.dom('#header'));
    api.setStatusBarStyle({
      style: 'light',
    });
    app = new Vue({
      el: '#app',
      data: {
        info: {},
        list: [],
        scroller: [],
        vip_right: [{
          icon: '../image/vip_right_icon1.png',
          title: '特权1',
          desc: '获得会员专属尊贵徽章',
        }, {
          icon: '../image/vip_right_icon2.png',
          title: '特权2',
          desc: '开通会员赠送港币',
        }, {
          icon: '../image/vip_right_icon3.png',
          title: '特权3',
          desc: 'VIP会员可查看访客信息',
        }, {
          icon: '../image/vip_right_icon4.png',
          title: '特权4',
          desc: 'VIP会员语音聊天享受8折优惠',
        }, {
          icon: '../image/vip_right_icon5.png',
          title: '特权5',
          desc: 'VIP会员可以赠送专属礼物',
        }, {
          icon: '../image/vip_right_icon6.png',
          title: '特权6',
          desc: '获得官方推荐，让更多用户看到你',
        }, {
          icon: '../image/vip_right_icon7.png',
          title: '特权7',
          desc: '突破求约门槛限制，和任意用户约会聊天',
        }],
      },
      created: function () {
        var _this = this;
        api.addEventListener({
          name: 'vip_refresh'
        }, function (ret, err) {
          _this.getPayVip()
        });
      },
      mounted: function () {
        var _this = this;
        _this.getPayVip();
      },
      methods: {
        goback: function () {
          api.closeWin();
        },

        getPayVip: function () {
          var _this = this;
          api.showProgress({
            title: '',
            text: '',
          });
          api.ajax({
            url: baseUrl + 'pay/vip',
            method: 'get',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid')
              },
            }
          }, function (ret, err) {
            api.hideProgress();
            if (ret.status == 200) {
              _this.info = ret.data.info;
              _this.list = ret.data.list
              _this.scroller = ret.data.scroller
            }
          })
        },

        go_pay: function () {
          var _this = this;
          api.openWin({
            name: 'my_vip_option',
            url: 'my_vip_option.html',
            bounces: false,
            pageParam: {
              info: _this.info,
              list: _this.list,
            }
          });
        },

      },
    })
  }
</script>